<template>
  <div class="customer-dialog">
    <el-tooltip class="item" effect="dark" transition="" :content="$t('customer.updateCustomer')" placement="bottom" m7automation="updateCustomer">
      <div class="text" @click="handleShowClick">
        <i class="iconfont icon-gengxinkehu"></i>
      </div>
    </el-tooltip>
    <el-dialog :close-on-click-modal="false"
    modal-append-to-body lock-scroll top="10%"
    :title="$t('customer.updateCustomer')"
    :visible.sync="isShow"
    @open="open"
    :width="callScreen?'70%':'800px'"
    :modal="!callScreen">
      <div class="edit"  v-if="isShow"  :class="callScreen?'screen-edit':''">
        <edit-cust
          rangeType="customerSlot"
          :editCustType ="update"
          :custInfo = "form"
          :isBlight = "false"
          :currentBusinessObj = "currentBusinessObj"
          @editCust='updateCustomer'
        ></edit-cust>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import EditCust from '@/components/business-modules/customer/AddCus.vue'
  import {deepClone} from '@/utils/m7Utils'
  import bus from '@/store/eventBus'
  export default{
    name: 'EditCustomerInfo',
    components: {
      EditCust
    },
    data () {
      return {
        isShow: false,
        form: {},
        update: 'update'
      }
    },
    props: {
      currentBusinessObj: Object,
      custInfo: Object,
      callScreen: Boolean
    },
    methods: {
      handleShowClick () {
        this.$emit('requestUpdateCustInfo', () => {
          this.isShow = true
        })
      },
      open () {
        this.form = deepClone(this.custInfo)
      },
      updateCustomer (form) {
        form.type = this.currentBusinessObj.type
        form.tabType = this.currentBusinessObj.tabType
        form.callId = this.currentBusinessObj.callId
        this.$store.dispatch('updateCustomer', form)
        .then((response) => {
          if (response.success) {
            this.isShow = false
            // bus.$emit('callUpdateCustomer')
          }
        })
      }
    },
    beforeMount () {
      this.form = deepClone(this.custInfo)
    }
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  legend
    display block
    width 100%
    padding 0
    margin-bottom 20px
    font-size 18px
    line-height 40px
    color $cf-gray2
    border 0
    border-bottom 1px solid #e5e5e5
  .text
    text-align center
  .iconfont
    font-size 14px
    color $c-main
  .edit
    left 20px
    overflow-y auto
    height 440px
    padding-bottom 10px
    .add
      height 100%
  .screen-edit
    height 350px
  .el-form
    padding 0 50px
    margin-bottom 80px
    .save
      background $c-main
      width 110px
      border none
      height 36px
      font-size 16px
      margin-right 0
      position absolute
      right 0px
  .push
    font-size 24px
    color $c-main
    display inline-block
    margin-top 26px
  .del
    margin-top 4px
  .call-screen-wrap
    display none
    width 100%
  .call-screen-container
    position fixed
    z-index 1998
    right 0
    top 0
    bottom 0
    background $cf-white
    border-left 1px solid #d3d3d3
    overflow-y auto
    cursor auto
  .layout
    transition transform 0.35s
    box-shadow 0 3px 6px rgba(0, 0, 0, .3)
    animation movelayout .25s
    @keyframes movelayout
      0%
        width 300px
      100%
        width 610px
  .layin
    width 0
    transition transform 0.35s
  .el-icon-close
    position absolute
    top 20px
    right 20px
    cursor pointer
  .call-screen-h3
    padding 16px 0 0 20px
</style>
